<template>
    <div class="editor">
        <textarea :value="input" @input="update"></textarea>
        <div class="wrap-show" v-html="compiler"></div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            input:'# Hello'
        }
    },
    methods:{
        update:_.debounce(function(e){
           this.input = e.target.value
        },300)
    },
    computed:{
        compiler(){
            return marked(this.input,{})
        }
    }
}
</script>

<style lang="scss">
    .editor{
        width: 100%;
        height: 100%;
        textarea{
            width: 50%;
            height: 100%;
            background: #f3c623;
            border: none;
            border-right: 1px solid #ddd;
            outline: none;
            font-family:'Courier New', Courier, monospace
        }
        .wrap-show{
            width: 50%;
            height: 100%;
            float: right;
            background: skyblue;
        }
    }
</style>